<script setup>
import AMapLoader from "@amap/amap-jsapi-loader";
import axios from "axios";
import { computed, ref } from "vue";
const prop = defineProps({
  _address: {
    type: String
  }
})
//处理地址
// const address = computed(() => {
//   const index = prop._address.indexOf('省')
//   if (index != -1) {
//     return prop._address.slice(0, index + 1)
//   } else {
//     const index2 = prop._address.indexOf('市')
//     return prop._address.slice(0, index2 + 1)
//   }
// })
//收货地经纬
let _endLoaction = ref(undefined)
window._AMapSecurityConfig = {
  securityJsCode: "2d42d4178204dbc9d50961c5ba8568e5",
};
AMapLoader.load({
  key: "0baf2a54caf4fbc510b7df96c64b3933", //申请好的 Web 端开发者 Key，首次调用 load 时必填
  version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
  plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['AMap.Scale','...','...']
})
  .then(async (AMap) => {
    //获取经纬
    const { data: { geocodes } } = await axios.get(`https://restapi.amap.com/v3/geocode/geo?address=${prop._address}&key=befa79835542803e1978330a00c77da8`)
    _endLoaction.value = geocodes[0].location
    let endLoaction = _endLoaction.value.split(',')
    var map = new AMap.Map("map_container",{
      zoom: 4
    }); //"container"为 <div> 容器的 id
    const marker1 = new AMap.Marker({
      position: [121.47, 31.23], //位置
      label: {
        content: '发货地'
      }
    });
    const marker2 = new AMap.Marker({
      position: [...endLoaction], //位置
      label: {
        content: '收货地'
      }
    });
    map.add([marker1, marker2]); //添加到地图

    const lineArr = [
    [121.47, 31.23],
    [...endLoaction]
    ];
    const polyline = new AMap.Polyline({
      path: lineArr, //设置线覆盖物路径
      strokeColor: "#3366FF", //线颜色
      strokeWeight: 5, //线宽
      strokeStyle: "solid", //线样式
    });
    map.add(polyline);
  })
  .catch((e) => {
    console.log(e);
  });
</script>
<template>
  <div id="map_container"></div>
</template>
<style lang="less">
#map_container {
  width: 100%;
  height: 400px;
  margin: 20px 0;
}
</style>